import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Dimensions,
    Text,
    View,
    TouchableOpacity,
    ImageBackground,
    Image,
    DeviceEventEmitter,
} from 'react-native';
import AndroidModule from '../../../../utils/AndroidConnent'
import { getImgUrl } from '../../../../utils/ComFunction'


const screenW = Dimensions.get('window').width;

export default class PublishCarPic extends Component {

    constructor(props) {
        super(props);
        this.state = {
            carPics: [],
            carPic: [],
            certPic: [],
            otherPic: []
        }
    };

    componentDidMount() {
        this.selectCarPicResult = DeviceEventEmitter.addListener('selectCarPicResult', (result) => {
            
            console.log('selectCarPicResult',result)
            if (result.selectCarPicResult) {
                let results = JSON.parse(result.selectCarPicResult)
                this.formatPics(results)
                if (this.props.picUrlChanged) {
                    this.props.picUrlChanged(results)
                }

            }
        })
    }

    componentWillUnmount() {
        if (this.selectCarPicResult) {
            this.selectCarPicResult.remove();
        }

    }

    componentWillReceiveProps(nextProps) {
        if (this.state.carPics != nextProps.carPics && JSON.stringify(nextProps.carPics) != '[]') {
            this.setState({
                carPics: nextProps.carPics,
            }, function () {
                this.formatPics(this.state.carPics)
            });
        }
    }


    formatPics(pics) {
        let carPic = []
        let certPic = []
        let otherPic = []
        pics && pics.map((item) => {
            if (!item.title || item.title == 'CAR_PIC') {
                carPic.push(item)
            } else if (item.title == 'CERT_PIC') {
                certPic.push(item)
            } else if (item.title == 'OTHER_PIC') {
                otherPic.push(item)
            }
        })
        this.setState({
            carPic,
            certPic,
            otherPic
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.titleText}>图片资料<Text style={{color: '#FB3D3C'}}>*</Text></Text>
                <View style={styles.imgContainer}>
                    <TouchableOpacity
                        style={styles.imgBox}
                        activeOpacity={0.8}
                        onPress={() => {
                            this.selectPic(0)
                        }}
                    >
                        {
                            this.state.carPic && this.state.carPic.length > 0 ?
                                <Image source={{ uri: getImgUrl(this.state.carPic[0].picUrl) }} style={styles.img} />
                                :
                                <Image source={require('source/image/add_img_icon.png')} style={styles.img} />
                        }
                        <Text style={styles.imgCountText}>{'车辆图片' + '(' + this.state.carPic.length + ')'}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.imgBox}
                        activeOpacity={0.8}
                        onPress={() => {
                            this.selectPic(1)
                        }}
                    >
                        {
                            this.state.certPic && this.state.certPic.length > 0 ?
                                <Image source={{ uri: getImgUrl(this.state.certPic[0].picUrl) }} style={styles.img} />
                                :
                                <Image source={require('source/image/add_img_icon.png')} style={styles.img} />
                        }
                        <Text style={styles.imgCountText}>{'证件图片' + '(' + this.state.certPic.length + ')'}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.imgBox}
                        activeOpacity={0.8}
                        onPress={() => {
                            this.selectPic(2)
                        }}
                    >
                        {
                            this.state.otherPic && this.state.otherPic.length > 0 ?
                                <Image source={{ uri: getImgUrl(this.state.otherPic[0].picUrl) }} style={styles.img} />
                                :
                                <Image source={require('source/image/add_img_icon.png')} style={styles.img} />
                        }
                        <Text style={styles.imgCountText}>{'其他图片' + '(' + this.state.otherPic.length + ')'}</Text>
                    </TouchableOpacity>

                </View>
            </View>
        )
    }

    selectPic(index) {
        let params = {
            index: index,
            carPics: this.props.carPics
        }
        AndroidModule.publishCarImageUpload(params, (error, results) => {
            console.log('results = ', results)
            this.formatPics(results)
            if (this.props.picUrlChanged) {
                this.props.picUrlChanged(results)
            }
        })
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        width: '100%',
        paddingHorizontal: 15,
        paddingVertical: 14,
        backgroundColor: '#fff'
    },
    titleText: {
        fontSize: 15,
        color: '#222',
        fontWeight: '500'
    },
    imgContainer: {
        marginTop: 15,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 98,
        width: '100%'
    },
    imgBox: {
        flexDirection: 'column',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    img: {
        width: 75,
        height: 75,
        borderRadius: 6
    },
    imgCountText: {
        color: '#999',
        fontSize: 12
    }

})